<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style type="text/css">

*{
    padding: 0;
    margin: 0;
}
        .demo{
            border: 1px solid #ccc;
            width: 300px;
            margin: 100px auto;
        }
        .demo li{
            float: left;
            list-style: none;
            padding: 2px;
            border:1px solid #ccc;
            margin-right: 4px;
        }

        .demo a{
            display: block;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 10px;
            background-color: #f36;
            text-decoration: none;
        }

        /*.demo li:last-child{
            background-color: #0f0;
        }*/
     /*   .demo li:nth-child(2n){!*偶数*!
            background-color: #0f0;
        }*/
/*偶数*/
/*  .demo li:nth-child(odd){
         background-color: #0f0;
     }*/
/*奇数*/
/*.demo li:nth-child(even){
    background-color: #0f0;
}*/

/*.demo li:nth-child(2n+1){!*奇数*!
    background-color: #0f0;
}*/
/*.demo li:nth-child(n+5){!*第五个开始*!
    background-color: #0f0;
}*/

/*.demo li:nth-last-child(3){!*从最后数第三个开始*!
    background-color: #0f0;
}*/

.demo li:only-child{
    background-color: #0f0;
}




        /*
        :first-child选择某个的第一个子元素;
        :last-chilcd 选择某个元素的最后一个子元素；
        :nth-child(n+5) 从第五个开始
        :nth-last-child(3) 从最后数第三个开始
        :nth-of-type() 选择指定的元素
        :only-child 选择的元素是它的父元素的唯一  一个子元素
        :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
        :emptp 选择的元素里面没有任何内容
        */
    </style>
</head>
<body>
<div class="demo  clearfix">
     <ul>
         <li><a href="">1</a></li>
         <li><a href="">2</a></li>
         <li><a href="">3</a></li>
         <li><a href="">4</a></li>
         <li><a href="">5</a></li>
         <li><a href="">6</a></li>
         <li><a href="">7</a></li>
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
     </ul>
</div>


<div class="demo  clearfix">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">1</a></li>
    </ul>
</div>
</body>
</html>